<template>
  <div class="qrCode-wrap">
    <div class="iframe-wrap">
      <div class="handle-wrap"
        v-if="!loading">
        <div class="err-wrap"
          v-if="!appid">
          <svg-icon icon-class="no-signal" />
          <p>网络加载失败</p>
          <el-button type="primary"
            size="small"
            class="refresh-btn"
            @click="refresh">刷新试试</el-button>
        </div>
        <div class="wx-wrap"
          v-else>
          <iframe sandbox="allow-scripts allow-top-navigation allow-same-origin"
            scrolling="no"
            :width="width"
            :height="height"
            frameBorder="0"
            allowTransparency="true"
            :src="setSrc"
            style="vertical-align: middle;">
          </iframe>
        </div>
      </div>
    </div>
    <div v-loading="true"
      class="loading-wrap">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  computed: {
    setSrc () {
      return 'https://open.weixin.qq.com/connect/qrconnect?appid=' + this.appid +
              '&scope=' + this.scope +
              '&redirect_uri=' + this.redirect_uri +
              '&state=' + this.state +
              '&login_type=' + this.login_type +
              '&style=' + this.theme +
              '&self_redirect=' + this.self_redirect +
              '&href=' + this.href
    }
  },
  props: {
    loading: Boolean,

    // 应用唯一标识，在微信开放平台提交应用审核通过后获得
    appid: String,
    // 应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
    scope: String,
    // 重定向地址，需要进行UrlEncode
    redirect_uri: String,
    // 用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
    state: {
      type: String,
      default: ''
    },
    // 提供"black"、"white"可选，默认为黑色文字描述。详见文档底部FAQ
    theme: {
      type: String,
      default: 'black'
    },
    // 自定义样式链接，第三方可根据实际需求覆盖默认样式。详见文档底部FAQ
    href: {
      type: String,
      default: ''
    },
    // true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。
    self_redirect: {
      type: String,
      default: 'false'
    },
    // sdk的扩展字符串，但是在这里就默认了jssdk，暂时不建议修改
    login_type: {
      type: String,
      default: 'jssdk'
    },
    // iframe 宽
    width: {
      type: String,
      default: '100%'
    },
    // iframe 高
    height: {
      type: String,
      default: '263px'
    }
  },
  methods: {
    refresh () {
      this.$emit('refresh')
    }
  }
}
</script>
<style lang="scss" scoped>
.qrCode-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto;
}
.iframe-wrap {
  position: relative;
  height: 100%;
  z-index: 2;
}
.loading-wrap {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border-radius: 6px;
  overflow: hidden;
  /deep/.el-loading-spinner .circular {
    width: 24px;
    height: 24px;
  }
  /deep/.el-loading-mask {
    background: #494a4f;
  }
}

.handle-wrap {
  position: relative;
  height: 100%;
}
.wx-wrap {
  border-radius: 6px;
  overflow: hidden;
}
.err-wrap {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  font-size: 12px;
  color: #999999;
  background: #494a4f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 6px;
  .svg-icon {
    font-size: 64px;
    margin-bottom: 10px;
  }
  .refresh-btn {
    position: absolute;
    bottom: -46px;
    width: 120px;
  }
}
</style>
